<template>
  <div>
    <button @click="change">gai</button>
    <child-change :a="a" @change="getA"></child-change>
    <v-selectpage :data="list" key-field="id" show-field="name"></v-selectpage>
    <router-link to="/hw/2">上一页</router-link>
    <div>{{ $store.state.count }}</div>
    <div class="end"></div>
  </div> 
</template>

<script>
import Vue from "vue";
import { SelectPage } from "v-selectpage";
import childChange from "@/components/childChange";

export default {
  components: {
    "v-selectpage": SelectPage,
    "child-change": childChange,
  },
  name: "HelloWorld",
  data() {
    return {
      list: [
        {
          id: 1,
          name: "Chicago Bulls",
          desc: "芝加哥公牛",
        },
        {
          id: 2,
          name: "Cleveland Cavaliers",
          desc: "克里夫兰骑士",
        },
      ],
      beforeObj: {
        a: 1,
        b: {
          b1: 1,
          b2: 2,
        },
      },
      a: 1,
    };
  },
  created() {
    // this.orderFun()
    // this.getRouter();
    this.yuanFun();
    setTimeout( ()=> this.a=111,5000);
    this.checkZi()
  },

  watch: {
    $route(to, from) {
      console.log(to);
      console.log(from);
    },
    beforeObj:{
     　handler(newVal){
        　　console.log(newVal)
    　　},
    　　deep:true
    }
  },
  methods: {
    change(){
      this.beforeObj.a++
      console.log(this.beforeObj)
    },
    checkZi(){
      let arr='ab哇'
      for (let index = 0; index < arr.length; index++) {
        if(arr.charCodeAt(index)>255){
          console.log('yanzheng',arr.charAt(index))
        }
        
      }
    },
    getA(a){
      console.log(a)
    },
    // 原型、构造函数、实例
    yuanFun() {
      let o = new Object();
      console.log("实例", o.__proto__.constructor === Object);
      console.log("原型", Object.prototype);
    },

    // 路由
    getRouter() {
      // console.log(this.$route.params.id)
      // console.log(this.$router)
      // console.log(window.history)
    },

    // js执行顺序
    orderFun() {
      console.log(this.$route);
      console.log("1");

      setTimeout(function () {
        console.log("2");
        process.nextTick(function () {
          console.log("3");
        });
        new Promise(function (resolve) {
          console.log("4");
          resolve();
        }).then(function () {
          console.log("5");
        });
      });
      process.nextTick(function () {
        console.log("6");
      });
      new Promise(function (resolve) {
        console.log("7");
        resolve();
      }).then(function () {
        console.log("8");
      });
      console.log("a");
      setTimeout(function () {
        console.log("9");
        process.nextTick(function () {
          console.log("10");
        });
        new Promise(function (resolve) {
          console.log("11");
          resolve();
        }).then(function () {
          console.log("12");
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  /* margin: 0 10px; */
}

a {
  color: #42b983;
  font-size: 0.5rem;
}
.end {
  width: 7.5rem;
  background: #42b983;
  height: 1rem;
}
</style>
